<template>
    <div class="shop">
        <div class="dev-width" style="margin:60px auto 0">
            <a class="store-logo">
                <img v-if="shop.hasOwnProperty('shopLogoUrl')" :src="absUrl(shop.shopLogoUrl)" />
                <img v-else src="../../assets/images/default/dp_logo.png">
            </a>
            <div class="store-name">
                <h3>{{shop.name}}</h3>
                <div v-if="shop.userType === '1'" class="store-valid geren">
                    <i class="iconfont icon-geren"></i>个人店铺
                </div>
                <div v-else-if="shop.userType === '2'" class="store-valid qiye">
                    <i class="iconfont icon-qiye2"></i>企业店铺
                </div>
            </div>
            <div class="store-search">
                <input type="text" v-model.trim="keyword" placeholder="请输入搜索关键字" />
                <a class="all-btn" @click="searchSite">搜全网</a>
                <a class="store-btn" @click="goToShopGoodList">搜本店</a>
            </div>
        </div>
        <div class="store-menu">
            <ul>
                <li class="active">
                    <a href="/">首页</a>
                </li>
                <li>
                    <a @click="goToShopGoodList">全部商品</a>
                </li>
            </ul>
        </div>
        <div class="banner-box">
            <Carousel v-model="carouselVisible" :height="400" :loop="true" :autoplay="setting.autoplay" :autoplay-speed="setting.autoplaySpeed" :dots="setting.dots" :radius-dot="setting.radiusDot" :trigger="setting.trigger" :arrow="setting.arrow">
                <CarouselItem v-if="!shop.hasOwnProperty('bannerUrlList')">
                    <img src="../../assets/images/default/dp_banner.png">
                </CarouselItem>
                <CarouselItem v-else v-for="(item,index) in shop.bannerUrlList" :key="index">
                    <img :src="absUrl(item)">
                </CarouselItem>
            </Carousel>
        </div>
        <div class="dev-width">
            <div class="store-title">热门推荐</div>
            <ul class="hot-list">
                <li v-for="(item,index) in recommendGoods" :key="index">
                    <nuxt-link :to="{path:'/goods',query:{id:item.goodsId}}">
                        <img v-if="!item.hasOwnProperty('logoUrl')" src="../../assets/images/no-img.png" />
                        <img v-else :src="absUrl(item.logoUrl[0])">
                    </nuxt-link>
                    <!--<img v-if="item.hasOwnProperty('logoUrl')" :src="absUrl(item.logoUrl[0])"/>-->
                    <nuxt-link :to="{path:'/goods',query:{id:item.goodsId}}">
                        <a class="goods-long-name">{{item.name}}</a>
                    </nuxt-link>
                    <p>
                        <i v-if='item.price==0 || item.price=="面议"'>面议</i>
                        <i v-else>¥ {{item.price}}元</i>
                    </p>
                </li>
            </ul>
            <div class="store-title">关于店铺</div>
        </div>
        <div class="about-store">
            <div class="dev-width">
                <p>{{shop.about}}</p>
            </div>
        </div>
    </div>
</template>
<script>
import portal from "~/net/portal";
import { absUrl } from '~/utils/tool'
export default {
    name: "shop",
    data() {
        return {
            carouselVisible: 0,
            recommendGoods: [],
            setting: {
                autoplay: true,
                autoplaySpeed: 2000,
                dots: "inside",
                radiusDot: true,
                trigger: "hover",
                arrow: "never"
            },
            keyword: "",
            shopId: 0,
            absUrl
        };
    },
    asyncData(context) {
        return portal.getShopDetailsById({
            query: { shopId: context.query["id"] },
            client: context.req
        }).then((res) => {
            //   console.log(res.data)
            return {
                shop: res.data
            }
        }).catch(e => {
            error({ statusCode: 404, messsage: '店铺信息错误' })
        })
    },
    created() {
        if (typeof this.$route.query.id != "undefined") {
            this.shopId = this.$route.query.id;
        }
        this.getShopPageListOrderByHot();
    },
    methods: {
        goToShopGoodList() {
            this.$router.push({
                path: "/shop/shopGoods",
                query: {
                    keyword: this.keyword,
                    id: this.shopId
                }
            });
        },
        searchSite() {
            this.$router.push({
                path: "/search",
                query: {
                    keyword: this.keyword,
                    code: ""
                }
            });
        },
        getShopPageListOrderByHot() {
            portal.getShopPageListOrderByHot({
                query: {
                    shopId: this.shopId,
                    num: 4,
                    order: "desc",
                    sort: "publishTime"
                }
            }).then(res => {
                let { code, data, message } = res;
                if (code === "0000") {
                    this.recommendGoods = data;
                } else {
                    this.$Message.error(message);
                }
            });
        }

    }
};
</script>

<style>
@import "~/assets/styles/shop.css";
</style>
